<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VISSIM仿真优化结果</title>

</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="char_1" style="width: 100%;height:730px;float:left;"></div>

</body>
</html>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

<script type="text/javascript" src="JavaScript/qwebchannel.js"></script>
<script type="text/javascript">

    draw_pic03([[0, 1], [0, 3], [0, 5], [0, 9]])
    window.onload = function () {
    new QWebChannel(qt.webChannelTransport, function (channel) {
        // 获取qt中绑定的交互对象
        window.pyjs_station = channel.objects.Web_Chart
        // js 绑定qt中的信号
        pyjs_station.list_send_to_js.connect(function (list) {
            var end = list.pop();
            if (end === 3){
                draw_pic03(list)
            }
        });
    });

}


function draw_pic03(list){
    // 绘制排放曲线
    var myChart = echarts.init(document.getElementById('char_1'));
    var option;
    const x_coo = Array.from({length: list[0].length}, (a, i) => i);
    option = {

        title: {
            text: '公交车尾气排放曲线',
            left: '10%'
        },

        legend: {
            data: ['CO', 'CO2', 'HC', 'NOX']
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        xAxis: {
            type: 'category',
            data: x_coo
        },


        yAxis: {
            type: 'value'
        },

        series: [
            {
                name: "CO排放量",
                type: 'line',
                stack: '总量',
                data: list[0],
                itemStyle: {
                    normal: {
                        lineStyle: {
                          width:3// 0.1的线条是非常细的了
                        }
                    }
                }
            },
            {
                name: "CO2排放量",
                type: 'line',
                stack: '总量',
                data: list[1],
                itemStyle: {
                    normal: {
                        lineStyle: {
                          width:3// 0.1的线条是非常细的了
                        }
                    }
                }
            },
            {
                name: "HC排放量",
                type: 'line',
                stack: '总量',
                data: list[2],
                itemStyle: {
                    normal: {
                        lineStyle: {
                          width:3// 0.1的线条是非常细的了
                        }
                    }
                }
            },
            {
                name: "NOX排放量",
                type: 'line',
                stack: '总量',
                data: list[3],
                itemStyle: {
                    normal: {
                        lineStyle: {
                          width:3// 0.1的线条是非常细的了
                        }
                    }
                }
            }
        ],


    animation: false  // 取消动画
    };
    myChart.setOption(option);
}

</script>